<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
    <!-- 
			过滤器：
				定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
				语法：
						1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
						2.使用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"
				备注：
						1.过滤器也可以接收额外参数、多个过滤器也可以串联
						2.并没有改变原本的数据, 是产生新的对应的数据
		-->
    <!-- 准备一个容器 -->
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <!-- 计算属性实现 -->
        <h2>现在是：{{fmtDate}}</h2>
        <!-- methods 实现 -->
        <h2>现在是：{{getFmtTime()}}</h2>
        <!-- 过滤器实现 -->
        <h2>现在是：{{time | timeFormatter}}</h2>
        <!-- 过滤器实现(传参) -->
        <h2>现在是：{{time | timeFormatter('YYYY-MM-DD')}}</h2>
        <!-- 过滤器串联 -->
        <h2>现在是：{{time | timeFormatter('YYYY-MM-DD') | mySlice}}</h2>
    </div>
    <div id="root2">
      <h2>{{msg | mySlice}}</h2>
    </div>
</body>
<script type="text/javascript" >
    Vue.config.productionTip = false; // 组织 Vue 在启动时生成生产提示
    // 配置全局过滤器
    Vue.filter('mySlice', function(value){
      console.log(value)
      return value.slice(0, 4)
    })
    new Vue({
      el: '#root',
      data:{ 
          time: 1621561377603, // 时间戳
          msg:'你好哇！凌宸'
      },
      computed:{
        fmtDate(){
          return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss")
        }
      },
      methods: {
        getFmtTime(){
          return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss") 
        }
      },
      // 局部过滤器
      filters:{
        timeFormatter(value, formatter = "YYYY年MM月DD日 HH:mm:ss"){
          return dayjs(value).format(formatter) 
        },
        // mySlice(value){
        //   return value.slice(0,4)
        // }
      }
    })

    new Vue({
			el:'#root2',
			data:{
				msg:'你好哇！凌宸'
			}
		})
</script>
</html>